<template>
	<view class="payment">
		<!-- 头部 -->
		<view class="header">
			<!-- 倒计时 -->
			<view class="time">
				<image src="../../static/icons/zjc/icon_clock@2x.png" mode=""></image>
				<text>{{minute}}:{{second}}</text>
			</view>
			<view class="pay_price">
				<text class="text">应付:￥</text>
				<text class="price">{{totalPrice}}</text>
			</view>
		</view>
		<view class="pay_title">
			支付方式
		</view>
		<!-- 支付方式 -->
		<view class="pay_way">
			<view class="pay_item" v-for="item in bankWay" :key="item._id">
				<view class="left">
					<image src="../../static/images/zjc/A-27/Image_gs@2x.png" class="pay_image">
					</image>
					<text>{{item.name}}</text>
				</view>
				<view class="checked" v-if="item.isSelect==false" @tap="setPayWay(item)">
				</view>
				<image src="../../static/icons/zjc/icon_select@2x.png" mode="" class="select" v-else></image>
			</view>
			<view class="pay_item all">
				<text>全部支付方式</text>
				<image src="../../static/icons/zjc/button_back_arrow2x.png" mode="" class="back" type="primary"
					@tap="show"></image>
			</view>
		</view>
		<!-- 其他支付方式 -->
		<view class="pay_way else">
			<view class="pay_item" v-for="item in elseWay" :key="item._id">
				<view class="left">
					<image :src='"../../static/images/zjc/A-27/"+item.image' class="pay_image">
					</image>
					<text>{{item.name}}</text>
				</view>
				<view class="checked" v-if="item.isSelect==false" @tap="setPayWay(item)">
				</view>
				<image src="../../static/icons/zjc/icon_select@2x.png" mode="" class="select" v-else></image>
			</view>
		</view>
		<!-- 弹出框组件 -->
		<view class="test">
			<popup-layer ref="popupRef" :direction="'top'">
				<view class="pay_way">
					<view class="pay_item" v-for="item in moreWay" :key="item._id">
						<view class="left">
							<image src="../../static/images/zjc/A-27/Image_gs@2x.png" class="pay_image">
							</image>
							<text>{{item.name}}</text>
						</view>
						<view class="checked" v-if="item.isSelect==false" @tap="setPayWay(item)">
						</view>
						<image src="../../static/icons/zjc/icon_select@2x.png" mode="" class="select" v-else></image>
					</view>
					<view class="pay_item add">
						<text>添加新银行</text>
						<image src="../../static/icons/zjc/button_back_arrow2x.png" class="back"></image>
					</view>
				</view>
			</popup-layer>
		</view>
		<view class="foot">
			<!-- <navigator url="../orderFeelback/orderFeelback"> -->
			<button type="default" class="btn" disabled="true" v-if="time<=0"
				style="color: #000000;">订单已过期，请重新下单</button>
			<button type="default" class="btn" v-else @tap="nowBuy">立即支付</button>
			<!-- </navigator> -->
		</view>
	</view>
</template>

<script>
	//选择器插件
	import popupLayer from "../../until/popup-layer.vue"
	import {
		createNamespacedHelpers
	} from "vuex";
	let {
		mapActions,
		mapState,
		mapMutations
	} = createNamespacedHelpers("users");
	let {
		mapActions: goodsMapAcitons,
		mapState: goodsMapState
	} = createNamespacedHelpers("goods");
	export default {
		components: {
			popupLayer
		},
		onLoad(options) {
			console.log(options)
			this.countDown();
			this.totalPrice = options.total;
			this.orderId=options.id;
			this.mylookAddress();
		},
		data() {
			return {
				time: 600,
				boolShow: false,
				totalPrice: 0,
				orderId:"",
				bankWay: [{
						_id: 1,
						name: "中国工商银行(8547)",
						isSelect: false
					},
					{
						_id: 2,
						name: "中国招商银行银行(5847)",
						isSelect: false
					},
					{
						_id: 3,
						name: "成都农商银行(8541)",
						isSelect: false
					},
					{
						_id: 4,
						name: "中国邮政储蓄银行(8576)",
						isSelect: false
					}
				],
				elseWay: [{
						_id: 1,
						name: "微信支付",
						image: "image_weixin@2x.png",
						isSelect: true,
					},
					{
						_id: 2,
						name: "支付宝支付",
						image: "image_zhifubao@2x.png",
						isSelect: false,
					},
					{
						_id: 3,
						name: "余额支付",
						image: "image_yue@2x.png",
						isSelect: false,
					}
				],
				moreWay: [{
						_id: 1,
						name: "中国邮政储蓄银行",
						isSelect: false
					},
					{
						_id: 2,
						name: "中国银行储蓄",
						isSelect: false
					},
					{
						_id: 3,
						name: "中国农业银行",
						isSelect: false
					},
				]
			}
		},
		methods: {
			//银行支付方式选中
			setPayWay(way) {
				this.bankWay.forEach(item => {
					item.isSelect = false;
				});
				this.elseWay.forEach(item => {
					item.isSelect = false;
				});
				this.moreWay.forEach(item => {
					item.isSelect = false;
				});
				way.isSelect = true;
			},
			//订单有效倒计时
			countDown() {
				const timerId = setInterval(() => {
					if (this.time > 0) {
						this.time--;
					} else {
						clearInterval(timerId);
					}
				}, 1000)
			},
			// 弹出
			show() {
				this.$refs.popupRef.show(); // 或者 boolShow = rue
			},
			// 关闭
			close() {
				this.$refs.popupRef.close(); // 或者 boolShow = false
			},
			...mapActions(["mylookAddress"]),
			...goodsMapAcitons(["userBuyCarts","userNowPay"]),
			async nowBuy() {
					const res = await this.userNowPay({
						id:this.orderId
					})
					console.log(res,"------------------");
				if (res.result) {
					uni.showModal({
						title: "提示",
						content: "支付成功!",
						showCancel: false
					});
					uni.navigateTo({
						url: "../orderFeelback/orderFeelback"
					})
				}else {
					uni.showModal({
						title: "提示",
						content: "账户未充值!",
						showCancel: false
					});
				}
			}
		},
		computed: {
			...goodsMapState(["shopCarts"]),
			...mapState(["defaultAddress"]),
			//购物车id
			ids() {
				let ids = [];
				this.shopCarts.forEach((item) => {
					ids.push(item.id);
				});
				return ids.join();
			},
			//倒计时分钟数
			minute() {
				return parseInt(this.time / 60);
			},
			//倒计时秒数
			second() {
				return parseInt(this.time % 60);
			}
		}
	}
</script>

<style>
	.header {
		width: 750rpx;
		height: 155rpx;
		background-color: #ffffff;
		position: relative;
		display: flex;
		margin-bottom: 126rpx;
	}

	.header .time {
		width: 110rpx;
		height: 40rpx;
		background-color: #f5610c;
		border-radius: 0rpx 20rpx 20rpx 0rpx;
		position: absolute;
		left: 0;
		top: 42rpx;
		display: flex;
	}

	.header .time text {
		font-size: 20rpx;
		line-height: 28rpx;
		color: #ffffff;
		margin-top: 6rpx;
	}

	.header .time image {
		width: 45rpx;
		height: 45rpx;
		vertical-align: baseline;
	}

	.header .pay_price {
		margin: 36rpx auto 34rpx;
		/* border: 1rpx solid #007AFF; */
	}

	.pay_price .price {
		font-size: 60rpx;
		color: #ee1515;
	}

	.pay_title {
		box-sizing: border-box;
		padding-left: 36rpx;
	}

	.pay_way {
		width: 750rpx;
		/* height: 464rpx; */
		background-color: #ffffff;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
	}

	.pay_way .pay_item {
		height: 94rpx;
		border: solid 1rpx #dadada;
		box-sizing: border-box;
		padding: 26rpx 60rpx 24rpx 68rpx;
		display: flex;
		justify-content: space-between;
	}

	.pay_item .pay_image {
		width: 46rpx;
		height: 46rpx;
		vertical-align: middle;
	}

	.pay_item .left text {
		font-size: 28rpx;
		line-height: 40rpx;
		color: #474747;
		margin-left: 20rpx;
	}

	.pay_item .checked {
		width: 34rpx;
		height: 34rpx;
		background-color: #ffffff;
		border: solid 2rpx #707070;
		border-radius: 50%;
	}

	.pay_item .select {
		width: 39rpx;
		height: 39rpx;
	}

	.pay_way .all {
		box-sizing: border-box;
		padding-left: 136rpx;
	}

	.pay_way .all .back {
		width: 40rpx;
		height: 40rpx;
	}

	.pay_way .pay_item.add {
		box-sizing: border-box;
		padding-left: 136rpx;
	}

	.pay_way .pay_item.add text {
		color: #f82525;
		font-size: 28rpx;
	}

	.pay_way .pay_item.add .back {
		width: 40rpx;
		height: 40rpx;
	}

	.more {
		width: 750rpx;
		height: 90rpx;
	}

	.foot {
		margin-top: 232rpx;
		width: 750rpx;
		height: 180rpx;
		background-color: #ffffff;
		box-shadow: 0rpx -4rpx 12rpx 0rpx #dcdcdc;
		box-sizing: border-box;
		padding-top: 36rpx;
		position: fixed;
		bottom: 0;
	}

	.foot .btn {
		width: 610rpx;
		height: 84rpx;
		background-color: #f5610c;
		border-radius: 42rpx;
		line-height: 84rpx;
		/* marigin-top: 36rpx; */
		font-size: 32rpx;
		color: #ffffff;
	}

	.pay_way.else {
		margin-bottom: 413rpx;
	}
</style>
